<?php
require_once "config.php";
?>
<?php Template::html_start() ?>
<link rel="stylesheet" type="text/css" href="http://www.t-modesign.com/lib/jquery.ad-gallery.css">
<script type="text/javascript" src="http://www.t-modesign.com/lib/jquery.ad-gallery.js"></script>
<? require "include/db.php"; ?>
<title>T-mo Design - work</title>

<style type="text/css">
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
}
#fin {left:390px;}
</style>
<style type="text/css">
  select, input, textarea {
    font-size: 1em;
  }
  .example {
    border: 1px solid #CCC;
    background: #f2f2f2;
    padding: 10px;
  }
  #gallery {
    padding: 30px;
    /*background: #e1eef5;*/
	float:left;
	margin-left: 20px;
  }
  #descriptions {
    position: relative;
	color: #b6b7b8;
    width: 480px;
    padding: 10px;
	margin-left:30px;
	margin-top:-21px;
	margin-bottom:30px;
  }
    #descriptions .ad-image-description {
      position: absolute;
    }
      #descriptions .ad-image-description .ad-description-title {
        display: block;
      }
	.ad-controls {color:#b6b7b8; height:auto}
	h2.acc_trigger {
	cursor:pointer;	
}

/*slider css*/
h1 span { color: #666; }
h1 small{
	font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 0.5em;
	display: block;
	color: #666;
}

h2.acc_trigger {
	padding: 0;	margin: 0 0 5px 0;
	font-weight: normal;
	float: left;
	width:220px;
	background: #6fabdd;
}
h2.acc_trigger a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding-left:10px;
	font-size:15px;
	padding-top:5px;
	padding-bottom:5px;
}
h2.acc_trigger a:hover {
	color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
	margin: 0 0 5px; padding: 0;
	overflow: hidden;
	clear: both;
	/*border: 1px solid #d6d6d6;*/
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px; 
}
.acc_container .block {
	padding: 10px;
}

.acc_container ul {
	color:#808285;
	margin:0px;
	padding-left:0px;
}

.acc_container li {
	margin-bottom: 10px;
	cursor:pointer;
}
.acc_container li:hover {
	color:#6FABDD;
	border-bottom: 1px dashed #6fabdd;
}
.acc_container .block p {
	padding: 5px 0;
	margin: 5px 0;
	font-size: 12px;
}
.acc_container h3 {
	font: 2em normal Georgia, "Times New Roman", Times, serif;
	margin: 0 0 10px;
	padding: 0 0 5px 0;
	border-bottom: 1px dashed #ccc;
}
.acc_container img {
	float: left;
	margin: 10px 15px 15px 0;
	padding: 5px;
	background: #ddd;
	border: 1px solid #ccc;
}

#neirong {
	width: 220px;
	float: left;
	margin-top:30px;
}
.ad-image-wrapper {border:1px solid #B6B7B8}
.ad-image-description {bottom:0}
  </style>
<?php Template::body_start(array("page"=>"work")) ?>
<?php
	$gallery = $_GET["project"];
	if($gallery) {
		$query = "SELECT a.* from gallery as a INNER JOIN projects as b ON a.pid = b.pid where b.project = '".$gallery."'";
		$result = mysql_query($query);
	} else {
		echo "No project found!";
	}
?>
<script type="text/javascript">
  $(function() {
    var galleries = $('.ad-gallery').adGallery({
		description_wrapper: $('#descriptions'),
		width: 650,
		display_next_and_prev: true, // Can you navigate by clicking on the left/right on the image?
  display_back_and_forward: true, // Are you allowed to scroll the thumb list?
		});
    $('#switch-effect').change(
      function() {
        galleries[0].settings.effect = $(this).val();
        return false;
      }
    );
  });
  
  jQuery(document).ready(function($){ //fire on DOM ready
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
	if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
		$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
		$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
	}
	return false; //Prevent the browser jump to the link anchor
});

});
  </script>
<div id="wrap_inner">
    <div id="content">
    <!--Content starts here-->
       <div id="neirong">
		<div class="container">
			<h2 class="acc_trigger active"><A>by project</A></h2>
			<div class="acc_container" style="display: block; ">
			<div class="block">
				<ul>
                	<li>bee my valentine</li>
                    <li>spencer's climb</li>
                    <li>we day</li>
                    <li>motto gift registry</li>
                    <li>pi tutoring</li>
                </ul>
			</div>
			</div>
	
			<h2 class="acc_trigger"><a>by category</a></h2>
			<div class="acc_container" style="display: none; ">
			<div class="block">
				<ul>
                	<li>web</li>
                    <li>print</li>
                </ul>
			</div>
		</div>
		</div>
        </div>
       <div id="gallery" class="ad-gallery">
      <div class="ad-image-wrapper">
      </div>
      <div class="ad-controls">
      </div>
      <div id="descriptions">
	  </div>
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul class="ad-thumb-list">
          	<? while($row = mysql_fetch_array($result))
 						{ ?>
							<li>
                            	<a href="http://www.t-modesign.com/images/<?=$row["url"]?>">
                                	<img src="http://www.t-modesign.com/images/<?=$row["thumb"]?>" alt="<?=$row["description"]?>" />
                                    </a>
                           	</li>
						<? } ?>
          </ul>
        </div>
      </div>
       </div>
       <div class="clear"></div>
    </div>
</div>
<!--COntent end-->
<?php Template::body_end() ?>
<?php Template::html_end() ?>
